<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-03-22 14:43:01
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\basic\uiFullcalendar\uiFullcalendar.vue
 * CIMC-V2
-->
<template>
  <div class="w-full overflow-auto text-current">
    <table id="tableId" class="border border-gray-600 select-none border-collapse">
      <tr>
        <!-- 渲染头部时间列区域 -->
        <th></th>
        <th v-for="(item, index) in timeList" :key="index" class="border border-gray-300">{{ item }}</th>
      </tr>
      <!-- 渲染分组项目数据 -->
      <tr v-for="item in groupItemList" :key="item.id">
        <td class="border border-gray-300">{{ item.name }}</td>
        <td v-for="(i, index) in timeList" :key="index" class="border border-gray-300">
          <p>{{ i + item.name }}</p>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin } from '@ve/mixin'
  export default defineComponent({
    name: 'UiFullcalendar',
    components: {},
    mixins: [UiMixin, RefsInjectMixin],

    data() {
      return {
        domHeight: 500,
        dragedTable_x0: null,
        dragedTable_y0: null,
        dragedTable_x1: null,
        dragedTable_y1: null,
        dragedTable_movable: false,
        dragedTable_preCell: null,
        dragedTable_normalColor: null,
        //起始单元格的颜色
        dragedTable_preColor: 'lavender',
        //目标单元格的颜色
        dragedTable_endColor: '#FFCCFF',
        dragedTable_movedDiv: 'dragedTable_movedDiv',
        dragedTable_tableId: '',
        timeList: [], // 时间列
        groupItemList: [
          {
            name: 'A01',
            id: 'A01',
          },
          {
            name: 'A02',
            id: 'A01',
          },
          {
            name: 'A03',
            id: 'A01',
          },
          {
            name: 'A04',
            id: 'A01',
          },
          {
            name: 'B01',
            id: 'B01',
          },
          {
            name: 'B02',
            id: 'B01',
          },
          {
            name: 'B03',
            id: 'B01',
          },
          {
            name: 'B04',
            id: 'B01',
          },
        ],
      }
    },
    computed: {
      getExtension() {
        return this.info.extension
      },
    },
    created() {
      // 计算时间列个数
      let startTime = '5a:00'
      let endTime = '19:41'
      let timeList = []
      const startH = Number(startTime.split(':')[0])
      const startM = Number(startTime.split(':')[1])
      const endH = Number(endTime.split(':')[0])
      const endM = Number(endTime.split(':')[1])
      const iTime = endH - startH
      if (iTime && iTime > 0 && !isNaN(startH) && !isNaN(startM) && !isNaN(endH) && !isNaN(endM)) {
        // 判断时间格式是否正确
        for (let i = 0; i < iTime; i++) {
          if (i === 0 && startM >= 30) {
            timeList.push(`${i + startH}:30`)
          } else {
            timeList.push(`${i + startH}:00`)
            timeList.push(`${i + startH}:30`)
          }
          if (i === iTime - 1 && 0 < endM && endM < 30) {
            timeList.push(`${i + startH + 1}:00`)
          } else if (i === iTime - 1 && 30 < endM) {
            timeList.push(`${i + startH + 1}:00`)
            timeList.push(`${i + startH + 1}:30`)
          }
        }
      } else {
        // 如果开始时间与结束时间格式不正确 则渲染默认的时间
        for (let i = 0; i < 12; i++) {
          timeList.push(`${i + 6}:00`)
          timeList.push(`${i + 6}:30`)
        }
      }
      this.timeList = timeList
    },
    mounted() {
      this.DragedTable('tableId')
      document.onmouseup = (event) => {
        this.hideDiv(event)
        var tdList = document.getElementsByTagName('td')
        for (var i = 0; i < tdList.length; i++) tdList[i].style.backgroundColor = this.dragedTable_normalColor
      }

      document.onmousemove = (event) => {
        this.dragDiv(event)
      }
    },
    methods: {
      DragedTable(tableId) {
        this.dragedTable_tableId = tableId
        var oTempDiv = document.createElement('div')
        oTempDiv.id = this.dragedTable_movedDiv
        oTempDiv.onselectstart = function () {
          return false
        }
        oTempDiv.style.cursor = 'hand'
        oTempDiv.style.position = 'absolute'
        oTempDiv.style.border = '1px solid black'
        oTempDiv.style.backgroundColor = this.dragedTable_endColor
        oTempDiv.style.display = 'block'
        document.body.appendChild(oTempDiv)
        document.getElementById(tableId).onmousedown = this.showDiv
      },
      // 得到控件的绝对位置
      getPos(cell) {
        var pos = new Array()
        var t = cell.offsetTop
        var l = cell.offsetLeft
        // while ((cell = cell.offsetParent)) {
        //   console.log('jinxunhuanle')
        //   t += cell.offsetTop
        //   l += cell.offsetLeft
        // }
        pos[0] = t
        pos[1] = l
        return pos
      },
      showDiv(event) {
        var obj = event.srcElement
        var pos = new Array()
        //获取过度图层
        var oDiv = document.getElementById(this.dragedTable_movedDiv)
        if (obj.tagName.toLowerCase() == 'td') {
          obj.style.cursor = 'hand'
          pos = this.getPos(obj)
          //计算中间过度层位置，赋值
          oDiv.style.width = obj.offsetWidth
          oDiv.style.height = obj.offsetHeight
          oDiv.style.top = pos[0]
          oDiv.style.left = pos[1]
          oDiv.innerHTML = obj.innerHTML
          oDiv.style.display = ''
          this.dragedTable_x0 = pos[1]
          this.dragedTable_y0 = pos[0]
          this.dragedTable_x1 = event.clientX
          this.dragedTable_y1 = event.clientY
          //记住原td
          this.dragedTable_normalColor = obj.style.backgroundColor
          obj.style.backgroundColor = this.dragedTable_preColor
          this.dragedTable_preCell = obj

          this.dragedTable_movable = true
        }
      },
      dragDiv(event) {
        if (this.dragedTable_movable) {
          var oDiv = document.getElementById(this.dragedTable_movedDiv)
          var pos = new Array()
          oDiv.style.top = event.clientY - this.dragedTable_y1 + this.dragedTable_y0
          oDiv.style.left = event.clientX - this.dragedTable_x1 + this.dragedTable_x0
          var tdList = document.getElementsByTagName('td')
          for (var i = 0; i < tdList.length; i++) {
            if (tdList[i].tagName.toLowerCase() == 'td') {
              pos = this.getPos(tdList[i])
              if (event.x > pos[1] && event.x < pos[1] + tdList[i].offsetWidth && event.y > pos[0] && event.y < pos[0] + tdList[i].offsetHeight) {
                if (tdList[i] != this.dragedTable_preCell) tdList[i].style.backgroundColor = this.dragedTable_endColor
              } else {
                if (tdList[i] != this.dragedTable_preCell) tdList[i].style.backgroundColor = this.dragedTable_normalColor
              }
            }
          }
        }
      },
      hideDiv(event) {
        console.log('event --------- hideDiv ', event)
        if (this.dragedTable_movable) {
          var tdList = document.getElementsByTagName('td')
          var pos = new Array()
          if (this.dragedTable_preCell != null) {
            for (var i = 0; i < tdList.length; i++) {
              pos = this.getPos(tdList[i])
              //计算鼠标位置，是否在某个单元格的范围之内
              if (event.x > pos[1] && event.x < pos[1] + tdList[i].offsetWidth && event.y > pos[0] && event.y < pos[0] + tdList[i].offsetHeight) {
                if (tdList[i].tagName.toLowerCase() == 'td') {
                  //交换文本
                  this.dragedTable_preCell.innerHTML += tdList[i].innerHTML
                  tdList[i].innerHTML = document.getElementById(this.dragedTable_movedDiv).innerHTML
                  //清除原单元格和目标单元格的样式
                  this.dragedTable_preCell.style.backgroundColor = this.dragedTable_normalColor
                  tdList[i].style.backgroundColor = this.dragedTable_normalColor
                  tdList[i].style.cursor = ''
                  this.dragedTable_preCell.style.cursor = ''
                  this.dragedTable_preCell.style.backgroundColor = this.dragedTable_normalColor
                }
              }
            }
          }
          this.dragedTable_movable = false
          //清除提示图层
          document.getElementById(this.dragedTable_movedDiv).style.display = 'none'
        }
      },
    },
  })
</script>
<style lang="scss" scoped>
  td {
    // width: 20%;
    height: 30px;
    overflow: visible;
    // border-bottom: 1px solid black;
    // border-right: 1px solid black;
    cursor: default;
    color: #999;
  }

  th {
    width: 80px;
    height: 20px;
    color: #000;
    // font-size: 12px;
    // font-weight: normal;
    // border-bottom: 2px solid black;
  }

  table {
    // border: 1px solid black;
    font-size: 13px;
    table-layout: fixed;
    width: 100%;
    // overflow: auto;
  }
</style>
